<template>
  
<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <TodoHeaderVue @setName='add'></TodoHeaderVue>
  <!-- 列表区域 -->
 <TodoMainVue :list='list' @getId='del'></TodoMainVue>
  <!-- 统计和清空 -->
  <TodoFooterVue :list='list' @clearList='cls' v-show="list.length>0"></TodoFooterVue>
</section>
</template>

<script>
import TodoFooterVue from './components/TodoFooter.vue'
import TodoHeaderVue from './components/TodoHeader.vue'
import TodoMainVue from './components/TodoMain.vue'
export default {
  data() {
    return {
      list: JSON.parse(localStorage.getItem('list'))||[
        {id:1,name:'吃饭'},
        {id:3,name:'睡觉'},
        {id:5,name:'打豆豆'}
      ]
    }
  },
  watch:{
    list:{
      deep:true,
      handler(val){
        // console.log(val)
        localStorage.setItem('list',JSON.stringify(val))
      }
    }
  },
  components:{
    TodoFooterVue,
    TodoHeaderVue,
    TodoMainVue
  },
  methods: {
    del(val){
      this.list = this.list.filter(e=>e.id!==val)
    },
    add(val){
      this.list.unshift({
        id:+new Date(),
        name:val
      })
    },
    cls(){
      this.list=[]
    }
  },
}
</script>

<style>
</style>